<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" href="../css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.background {
	border-style: none;
	width: 50px;
	height: 58px;
}

.numbers {
	border-style: none;
	background-color: #292929;
	padding: 0px;
	margin: 0px;
	width: 50px;
	height: 42px;
	text-align: center;
	font-family: Arial;
	font-size: 36px;
	font-weight: normal; /* options are normal, bold, bolder, lighter */
	color: #FFFFFF;
	/* change color using the hexadecimal color codes for HTML */
}

.title {
	/* the styles below will affect the title under the numbers, i.e., “Days”, “Hours”, etc. */
	border: none;
	padding: 0px;
	margin: 0px 2px;
	width: 50px;
	text-align: center;
	font-family: Arial;
	font-size: 10px;
	font-weight: normal; /* options are normal, bold, bolder, lighter */
	color: #999999;
	/* change color using the hexadecimal color codes for HTML */
	background-color: #000000;
}

#form {
	/* the styles below will affect the outer border of the countdown timer */
	width: 280px;
	height: 90px;
	border-style: ridge;
	/* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */
	border-width: 3px;
	border-color: #666666;
	/* change color using the hexadecimal color codes for HTML */
	background-color: #000000;
	padding: 2px;
	margin: 0px;
	position: absolute;
	/* leave as "relative" to keep timer centered on your page, or change to "absolute" then change the values of the "top" and "left" properties to position the timer */
	top: 38px; /* change to position the timer */
	left: 1px;
	/* change to position the timer; delete this property and it's value to keep timer centered on page */
}

.line {
	border-style: none;
	width: 50px;
	height: 4px;
	z-index: 15;
}
</style>

<script type="text/javascript">
	/*
	 Count down until any date script-
	 By JavaScript Kit (www.javascriptkit.com)
	 Over 200+ free scripts here!
	 Modified by Robert M. Kuhnhenn, D.O. 
	 on 5/30/2006 to count down to a specific date AND time,
	 and on 1/10/2010 to include time zone offset.
	 */

	/*  Change the items below to create your countdown target date and announcement once the target date and time are reached.  */
	var current = "Deadline Over!"; //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
	var year = 2012; //—>Enter the count down target date YEAR
	var month = 9; //—>Enter the count down target date MONTH
	var day = 23; //—>Enter the count down target date DAY
	var hour = 18; //—>Enter the count down target date HOUR (24 hour clock)
	var minute = 38; //—>Enter the count down target date MINUTE
	var tz = -5; //—>Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

	//—>    DO NOT CHANGE THE CODE BELOW!    <—
	var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
			"Aug", "Sep", "Oct", "Nov", "Dec");

	function countdown(yr, m, d, hr, min) {
		theyear = yr;
		themonth = m;
		theday = d;
		thehour = hr;
		theminute = min;
		var today = new Date();
		var todayy = today.getYear();
		if (todayy < 1000) {
			todayy += 1900;
		}
		var todaym = today.getMonth();
		var todayd = today.getDate();
		var todayh = today.getHours();
		var todaymin = today.getMinutes();
		var todaysec = today.getSeconds();
		var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy
				+ " " + todayh + ":" + todaymin + ":" + todaysec;
		var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
		var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr
				+ ":" + min);
		var futurestring = Date.parse(futurestring1)
				- (today.getTimezoneOffset() * (1000 * 60));
		var dd = futurestring - todaystring;
		var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
		var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000)
				* 1);
		var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000))
				/ (60 * 1000) * 1);
		var dsec = Math
				.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
		if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
			document.getElementById('count2').innerHTML = current;
			document.getElementById('count2').style.display = "inline";
			document.getElementById('count2').style.width = "390px";
			document.getElementById('dday').style.display = "none";
			document.getElementById('dhour').style.display = "none";
			document.getElementById('dmin').style.display = "none";
			document.getElementById('dsec').style.display = "none";
			document.getElementById('days').style.display = "none";
			document.getElementById('hours').style.display = "none";
			document.getElementById('minutes').style.display = "none";
			document.getElementById('seconds').style.display = "none";
			return;
		} else {
			document.getElementById('count2').style.display = "none";
			document.getElementById('dday').innerHTML = dday;
			document.getElementById('dhour').innerHTML = dhour;
			document.getElementById('dmin').innerHTML = dmin;
			document.getElementById('dsec').innerHTML = dsec;
			setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",
					1000);
		}
	}
</script>


</head>

<body onload="countdown(year,month,day,hour,minute)">
	<input type="button" value="View Students" style="float:right;" onclick="location.href='tab.html'"><br><br>
	<div>
		<h3 align="center">Time Remaining</h3>
	</div>

	<div id="form" style="position: absolute">
		<div class="numbers" id="count2"
			style="position: absolute; top: 12px; height: 57px; padding: 2px 0 0 2px; z-index: 20; left: 20px;"></div>
		<img src="images/bkgdimage.gif" class="background"
			style="position: absolute; left: 20px; top: 12px;" /> <img
			src="images/line.jpg" class="line"
			style="position: absolute; left: 22px; top: 40px;" />
		<div class="numbers" id="dday"
			style="position: absolute; left: 20px; top: 32px;"></div>

		<img src="images/bkgdimage.gif" class="background"
			style="position: absolute; left: 84px; top: 12px;" /> <img
			src="images/line.jpg" class="line"
			style="position: absolute; left: 84px; top: 40px;" />
		<div class="numbers" id="dhour"
			style="position: absolute; left: 84px; top: 32px;"></div>

		<img src="images/bkgdimage.gif" class="background"
			style="position: absolute; left: 146px; top: 12px;" /> <img
			src="images/line.jpg" class="line"
			style="position: absolute; left: 146px; top: 40px;" />
		<div class="numbers" id="dmin"
			style="position: absolute; left: 146px; top: 32px;"></div>

		<img src="images/bkgdimage.gif" class="background"
			style="position: absolute; left: 212px; top: 12px;" /> <img
			src="images/line.jpg" class="line"
			style="position: absolute; left: 212px; top: 40px;" />
		<div class="numbers" id="dsec"
			style="position: absolute; left: 212px; top: 32px;"></div>

		<div class="title" id="days"
			style="position: absolute; left: 20px; top: 72px;">Days</div>
		<div class="title" id="hours"
			style="position: absolute; left: 78px; top: 74px;">Hours</div>
		<div class="title" id="minutes"
			style="position: absolute; left: 138px; top: 72px;">Minutes</div>
		<div class="title" id="seconds"
			style="position: absolute; left: 207px; top: 72px;">Seconds</div>
	</div>

	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<div>
		<table width="53%" id="table1" class="table table-striped">
			<tr>
				<td colspan="2">
					<h2>
						<strong><center>Statistics</center></strong>
					</h2>
				</td>
			</tr>
			<tr>
				<td width="431">Total Students:</td>
				<td width="40">&nbsp;&nbsp;90</td>
			</tr>
			<tr>
				<td>Students currently not in any group:</td>
				<td>&nbsp;&nbsp;59</td>

			</tr>
			<tr>
				<td>No of current groups:</td>
				<td>&nbsp;&nbsp;4</td>
			</tr>

			<tr>
				<td>Expected Group Size:</td>
				<td>&nbsp;&nbsp;8</td>
			</tr>

		</table>
	</div>
</body>
</html>
